<script setup lang="ts">
import { ref } from 'vue'
import { registerMicroApps, start } from 'qiankun'
import { useRouter } from 'vue-router';
import {Subject} from 'rxjs'
const pager = new Subject();
//rxjs的订阅
pager.subscribe(v=>{
  console.log(v,7777);
})

let router = useRouter()
function toURL(path:string,query:{}):void{
  router.push({path,query})
}

console.log(Subject);
// 注册微应用
registerMicroApps(
  [
    {
      name: 'subApp', // 必须与微应用注册名字相同
      entry: 'http://127.0.0.1:5174', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
      container: '#sub-app-container', // app.vue 配置的挂载容器 id
      activeRule: '/microVue', // 当访问路由为 microVue 时加载微应用
      props: {
        // 主应用向微应用传递参数
        // data:{name:'陈思元',age:18,info:'安徽'},
        pager
      }
    },
    {
      name: 'subApp2', // 必须与微应用注册名字相同
      entry: 'http://127.0.0.1:5175', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
      container: '#sub-app-container', // app.vue 配置的挂载容器 id
      activeRule: '/microVue2', // 当访问路由为 microVue2 时加载微应用
      props: {
        // 主应用向微应用传递参数
        // data:{name:'陈思元',age:18,info:'安徽'},
        pager
      }
    }
  ],
  {
    // 生命周期钩子函数
    // beforeLoad: (app) => {
    //   console.log('beforeLoad', app)
    // },
    // beforeMount: (app) => {
    //   console.log('beforeMount ', app)
    // },
    // afterMount: (app) => {
    //   console.log('afterMount', app)
    // }
    // beforeUnmount: (app) => {
    //   console.log('beforeUnmount ', app)
    // },
    // afterUnmount: (app) => {
    //   console.log('afterUnmount', app)
    // }
  }
)

// 启动 qiankun
start({sandbox:{strictStyleIsolation: true}})//沙箱 shadow 影子dom
// start({sandbox:{experimentalStyleIsolation : true}})//cssmodule
// start()//默认情况下沙箱可以确保单实例场景子应用之间的样式隔离
</script>

<template>
    <!-- 提供挂载容器 -->
    <button @click="toURL('/microVue/HomePage1',{name:'66'})">主应用里跳Vue/HomePage1</button>
    <button @click="toURL('/microVue2/HomePage1',{name:'66'})">主应用里跳Vue2/HomePage1</button>
    主应用11
    <div id="sub-app-container"></div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
